<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--

  ul {

        position: absolute; 这个可以设置让li里面的文字可见，而不是全部覆盖让li看不见
    }

-->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    .nav {
        width: 1000px;
        margin: 100px auto;
        position: relative;
        background: url("images/rss.png") no-repeat right center #fff;
        height: 40px;
    }

    body {
        background-color: #000;
    }

    li {
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border-left: 1px solid red;
        text-align: center;
        color: #000;
        cursor: pointer;
    }

    ul {
        position: absolute;
    }

    img {
        background: url("images/cloud.gif") no-repeat;
        width: 83px;
        height: 42px;
        float: left;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<script>

    window.onload = function () {

        let lis = document.getElementsByTagName("li");
        let img = document.getElementsByTagName("img")[0];
        var current = 0;
        var leader = 0, target = 0;
        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                console.log(this.offsetLeft + "onmouseover");
                target = this.offsetLeft;
            }
            lis[i].onmouseout = function () {
                console.log(this.offsetLeft + "onmouseout");
                target = current;
            }
            lis[i].onclick = function () {
                console.log(this.offsetLeft + "onclick");
                current = this.offsetLeft;
            }
        }
        // 缓动公式
        var leader = 0, target = 0;

        setInterval(function () {
            leader = leader + (target - leader) / 10;
            img.style.left = leader + "px";
        }, 10);
    }
</script>
<body>

<div class="nav">
    <!--  <span ></span>-->
    <img src="" alt="" class="clo"/>
    <ul>
        <li>首页新闻</li>
        <li>师资力量</li>
        <li>活动策划</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>

</div>
</body>
</html>